<div class="page-wrapper d-flex flex-column pt-4">
    <div class="container-xl">
        <div class="page-header d-print-none">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        Listing
                    </div>
                    <h3 class="page-title">
                        All Themes
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="page-body d-flex flex-row-reverse">

        <aside class="bd-sidebar sub-sidebar">
            <nav class="bd-links p-3" aria-label="Sub-section navigation">
                <div class="card card-body">
                    <filter-list request="request" create-url="'/portal/theme/create'" callback="getList(pageIndex)"
                        create-text="'Upload Theme'">
                    </filter-list>
                </div>
            </nav>
        </aside>

        <!-- ----------------------------------------------------------- -->

        <div class="content-body py-3 pe-3">

            <div class="card mb-5">
                <div class="card-body">
                    <table class="table table-hover" cellspacing="0">
                        <thead class="thead-light">
                            <tr>
                                <!-- <th scope="col" width="5px">
                    <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small>
                </th> -->
                                <th scope="col">Title</th>
                                <!-- <th scope="col">
                    Name
                </th>
                <th scope="col">
                    Version
                </th> -->
                                <th scope="col" width="15%">Image</th>
                                <th scope="col" width="10%">Author</th>
                                <th scope="col" width="20%">Created Date</th>
                                <th scope="col" width="15%" class="text-end"></th>
                            </tr>
                        </thead>

                        <tbody class="sortable" ng-init="getList()">
                            <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="theme"
                                sort-model-id="{{item.id}}">
                                <!-- <td style="cursor:grab;" class="drag-header">
                    <small class="fa fa-grip-vertical fa-xs text-black-50 align-middle"></small>
                </td> -->
                                <td class="">
                                    {{item.title}}
                                </td>
                                <!-- <td class="text-black-50 align-middle">
                    <small>???</small>
                </td>
                <td class="text-black-50 align-middle">
                    <small>v???</small>
                </td> -->
                                <td>
                                    <img height="30" imageonload ng-src="{{item.imageUrl}}" />
                                </td>
                                <td>
                                    <small class="text-black-50 align-middle">{{item.createdBy}}</small>
                                </td>
                                <td>
                                    <small class="text-black-50 align-middle">
                                        {{item.createdDateTime | utcToLocal:'dd/MM/yyyy hh:mm a'}}
                                    </small>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-sm btn-group-sm float-end" role="group"
                                        aria-label="Actions">
                                        <a ng-if="item.previewUrl" href="{{item.previewUrl}}" target="_blank"
                                            class="btn btn-link text-primary">
                                            <span class="fas fa-eye"></span>
                                        </a>
                                        <a href="/portal/template/list/{{item.id}}" class="btn btn-link text-primary">
                                            <span class="fas fa-paint-brush"></span>
                                        </a>
                                        <a href="/portal/file/list?folder=wwwroot/{{item.assetFolder}}"
                                            class="btn btn-link text-primary">
                                            <span class="fas fa-file"></span>
                                        </a>
                                        <a href="/portal/theme/export/{{item.id}}"
                                            class="btn btn-sm btn-link d-inline-block text-primary">
                                            <span class="fas fa-arrow-down"></span></a>

                                        <a ng-click="syncTemplates(item.id)"
                                            class="btn btn-sm btn-link d-inline-block text-primary"><span
                                                class="fas fa-sync-alt"></span></a>
                                        <!-- 
                        <a ng-click="shareTemplates(item.id)"
                            class="btn btn-sm btn-link d-inline-block text-primary"><span
                                class="fas fa-cloud-upload-alt"></span></a> -->

                                        <a href="/portal/theme/details/{{item.id}}" class="btn btn-link text-primary">
                                            <span class="fas fa-pen"></span>
                                        </a>

                                        <a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                            <span class="fas fa-trash-alt"></span>
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="card-body">
                    <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                        ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)" scroll-top="true">
                    </paging>
                </div>
            </div>

        </div>
    </div>
</div>